<template>
	<view class="">
		<!-- 顶部导航 -->
		<uni-nav-bar left-icon="back" backgroundColor="#C52B2E" color="#FFFFFF" @clickLeft = "back">	
		</uni-nav-bar>
		<view class="xianxia" >
			<image src="../../../static/PersonalCenter/kaiguang.png" mode="widthFix"  style="width: 232rpx; "></image>
			<view class="size">线下开光</view>
		</view>
		<view class="border" style=""></view>
		<view class="contacts">
			<view class="">联系人:</view>
			<input type="text" value="" v-model="name" class="xingmin" placeholder="请填写联系姓名" placeholder-class="holder"/>
		</view>
		<view class="contacts">
			<view class="">联系方式:</view>
			<input type="text" value="" v-model="phone" class="xingmin" placeholder="请填写联系姓名" placeholder-class="holder"/>
		</view>
		<view class="contacts">
			<view class="">供奉金额:</view>
			<input type="text" value="" v-model="amount"  class="xingmin" placeholder="请填写供奉金额面值" placeholder-class="holder"/>
		</view>
		<view class="contacts">
			<view class="">我要留言:</view>
			<!-- <input type="text" value="" class="message" placeholder="请留言" placeholder-class="liuyan" maxlength = "50"/> -->
		    <textarea value="" v-model="remark" placeholder="请留言"  class="message" placeholder-class="liuyan" maxlength="500" @input ="onCeIntroductionInput"/>
			<view class="sizeView">
				<text class="textSize">{{wordsnumber}}/500</text>
			</view>
		</view>
		<view class="contacts">
			<view class="">添加图片:</view>
			<view class="tupian" @click="chooseAlbumpic">
				<image src="../../../static/PersonalCenter/tianjia.png" mode="" class="tianjia" v-if="pic == ''"></image>
				<image :src="pic" class="pict" mode="heightFix" v-if="pic !== ''"></image>
			</view>
			
		</view>
		
		<button type="default" class="btn" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic: '',
				wordsnumber: 0,
				name: '', // 姓名
				phone:'',  // 联系电话
				remark: '' ,// 留言
				amount: '', // 供奉金额
				pray_id: '', // 祈福ID
				token: '',
				rules : {
					phone : {
						rule:/^1[3456789]\d{9}$/,
						msg: '电话号码格式错误'
					},
					name : {
						rule: /\S/,
						msg: '联系人不能为空'
					},
					amount : {
						rule: /\S/,
						msg: '供奉金额不能为空'
					}
				},
				images: ''
			};
		},
		onLoad(options) {
			this.token = uni.getStorageSync('token')
			this.pray_id = options.pray_id
			console.log(this.pray_id)
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 添加图片
			unloadpic(){
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseTakePhotopic(); //执照拍照
						} else {
							this.chooseAlbumpic(); //执照相册
						}
					}
				});
			},
			chooseAlbumpic(){
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.pic = tempFilePaths[0]
						uni.uploadFile({
							url: 'https://www.123qifu.com/api/common/upload', //仅为示例，非真实的接口地址
							header: {
								'token':  that.token
							},
							filePath: that.pic,
							name: 'file',
							formData: {
							
							},
							success: (uploadFileRes) => {
							  const list = JSON.parse(uploadFileRes.data)
							  console.log(list)
							  that.images = list.data.url  
							   
							}
						});
					},
				})	
			},
			onCeIntroductionInput(event){
				
				this.wordsnumber = event.detail.cursor
			},
			// 判断验证
			validate(key){
				let bool = true;
				if(!this.rules[key].rule.test(this[key])){
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					// 取反
					bool = false;
					return false;
				}
				return bool;
			},
			
			// 提交
			async submit(){
				if (!this.validate('name')) return
				if (!this.validate('phone')) return
				if (!this.validate('amount')) return
				
				let that = this
				const res = await that.$myRequest({
					url: 'user/add_KaiGuang',
					method:"POST",
					header: {
						'token':  that.token
					},
					data: {
						pray_id: that.pray_id ,
						contacts_name : that.name,
						contacts_phone : that.phone,
						money : that.amount,
						remark : that.remark,
						type: 2,
						images: that.images
					}
				})
				console.log(res)
				if (res.data.code == 1){
					let that = this
				    that.ordercode = res.data.msg
					const datas = await this.$myRequest({
						url: 'pay/wx_pay',
						method:"POST",
						header: {
							// 'Authorization' : that.bearerToken
							'token':  that.token
						},
						data: {
							order_sn: that.ordercode
						}
					})
					console.log(datas)
					if(datas.data.code == 1) {
						// alert(11111)
						WeixinJSBridge.invoke(
						   'getBrandWCPayRequest', {
						      "appId":datas.data.data.appId,//公众号名称，由商户传入     
						      "timeStamp":datas.data.data.timeStamp,//时间戳，自1970年以来的秒数     
						      "nonceStr":datas.data.data.nonceStr,//随机串 
						      "package":datas.data.data.package,
						      "signType":datas.data.data.signType,//微信签名方式：
						      "paySign":datas.data.data.paySign//微信签名
						   },
						function(res){
							// alert(JSON.stringify(res))
							// alert(1111)
						    if(res.err_msg == "get_brand_wcpay_request:ok" ){
								// 使用以上方式判断前端返回,微信团队郑重提示：
						        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
								// alert(out_trade_no)
								uni.request({
									url: "https://www.123qifu.com/api/pay/weixin_getList",
									method:"POST",
									header: {
										// "Authorization" : that.bearerToken
										'token':  that.token
									},
									data:{
										order_sn:that.ordercode
									},
									success: (res) => {
										if(res.data.code == 1) {
											uni.showToast({
												title:"支付成功",
												icon:"none"
											})
											
										}
									}
								})	
						    }
						}
						);
						
				    }
				}
			},
			
			
		}
	}
</script>

<style lang="scss">
	.xianxia {
		margin-top: 32rpx;
		margin-left: 28rpx;
		position: relative;
		.size {
			position: absolute;
			top: 10rpx;
			left: 57rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.border {
		border-bottom: 1rpx dashed #333333;
		padding-top: 25rpx;
	}
	.contacts {
		padding-top: 45rpx;
		padding-left: 27rpx;
	    padding-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		.xingmin {
			width: 525rpx;
			height: 69rpx;
			border: 1rpx solid #CECECE;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
			padding-left: 15rpx;
		}
	
		.message {
			width: 525rpx;
			height: 169rpx;
			border: 1rpx solid #CECECE;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
			padding-left: 15rpx;
			padding-top: 10rpx;
		}
		.sizeView {
			position: absolute;
			right: 40rpx;
			bottom: 20rpx;
		}
		.tupian {
			width: 540rpx;
			height: 278rpx;
			border: 1px dashed #CECECE;
			display: flex;
			justify-content: center;
            align-items: center;
			.tianjia {
				width: 144rpx;
				height: 144rpx;
				
			}
			.pict {
				width: 100%;
				height: 100%;
			}
		}
	}
	.btn {
		width: 710rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #C52B2E;
		border-radius: 80rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
	

</style>
